// 定义函数与mixin
// 根据不同设备的屏幕宽度，定义<html>的基准font-size
@mixin html-font-size() {
    @each $current-width in $device-widths {
        @media (min-width: $current-width) {
            html {
                $x: $UI-resolution-width / $current-width; // 计算出是几倍屏
                font-size: $rem-base-font-size / $x;
            }
        }
    }
}

// 将设计图标注的px尺寸，转换为相应的CSS
@function convertPxFormUI($px) {
    @return $px / $rem-base-font-size * 1rem;
}

// inline-block
// 在CSS中经常会有碰到，比如说我们需要制作一个水平排列的表单，其中 label标签需要和表单控件（比如说input[type="text"]、input[type="checkbox"]等）垂直居中对齐，我们常用的就是给他们加上下面的样式： 
$inline-block-alignment: middle !default; //设置一个默认的对齐方式 
// 提供一个跨浏览器的方法来实现`display:inline-block` 
@mixin inline-block($alignment: $inline-block-alignment) {
    display: inline-block;
    @if $alignment and $alignment !=none {
        vertical-align: $alignment;
    } // @if $legacy-support-for-ie {
    //     *vertical-align: auto;
    //     zoom: 1;
    //     *display: inline;
    // }
}

// 水平居中
@mixin horizontal-center {
    margin-left: auto;
    margin-right: auto;
}

%horizontal-center {
    @include horizontal-center;
}

// 浮动与重置浮动
@mixin float($side:left) {
    float: unquote($side); // @if $legacy-support-for-ie {
    //     _display: inline;
    // }
}

//左浮动 
@mixin pull-left {
    @include float(left);
}

%pull-left {
    @include float(left);
}

//右浮动 
@mixin pull-right {
    @include float(right);
}

%pull-right {
    @include float(right);
}

// 重置浮动
@mixin reset-float($display:block) {
    float: none;
    display: $display;
}

// 清除浮动clearfix
@mixin clearfix {
    // @if $legacy-support-for-ie {
    //     *zoom: 1;
    // }
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
        overflow: hidden;
    }
}

%clearfix {
    @include clearfix;
}

// 隐藏元素
//1.浏览器和屏幕阅读器都隐藏元素 
@mixin hidden {
    display: none !important;
    visibility: hidden;
}

%hidden {
    @include hidden;
}

//2.仅浏览器隐藏，屏幕阅读器不被隐藏 
@mixin visuallyhidden {
    // @if $legacy-support-for-ie {
    //     clip: rect(0, 0, 0, 0);
    // }
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; ////扩展了`.visuallyhidden`，充许`.focusable`元素通过键盘获取 
    &.focusable:active,
    &.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
}

%visuallyhidden {
    @include visuallyhidden;
}

//3.隐藏元素，但布局中占有空间 
@mixin invisible {
    visibility: hidden;
}

%invisible {
    @include invisible;
}

// 文本溢出省略显示
@mixin text-ellipsis () {
    // 部分浏览器还需要加宽度width属性
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

%text-ellipsis {
    @include text-ellipsis;
}

//多行文本溢出省略显示 ,支持 WebKit浏览器或移动端的页面
@mixin text-ellipsis () {
    overflow: hidden;
    text-overflow: ellipsis; // 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
    display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 
    -webkit-line-clamp: 3; //用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
    -webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 
}

// 跨浏览器的透明度设置
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

// 禁用样式disabled
@mixin disabled($bgColor: #e6e6e6, $textColor:#ababab) {
    background-color: $bgColor !important;
    color: $textColor !important;
    cursor: not-allowed !important;
}

// 最小高度min-height
@mixin min-height($height) {
    min-height: $height;
    height: auto !important; // @if $legacy-support-for-ie {
    //     _height: $height;
    // }
}

// Animations 和 keyframes
// @mixin keyframes($animation-name) {
//     @-webkit-keyframes $animation-name {
//         @content;
//     }
//     @-moz-keyframes $animation-name {
//         @content;
//     }
//     @-ms-keyframes $animation-name {
//         @content;
//     }
//     @-o-keyframes $animation-name {
//         @content;
//     }
//     @keyframes $animation-name {
//         @content;
//     }
// }

@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation: #{$str};
    -ms-animation: #{$str};
    -o-animation: #{$str};
    animation: #{$str};
}

// Transitions
@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

// 圆角边框
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// display:inline-block
@mixin dib() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

// $image-path: '../../images' !default;
// $fallback-extension: 'png' !default;
// $retina-suffix: '@2x';
// @mixin background-image($name, $size:false) {
//     background-image: url(#{$image-path}/#{$name}.png);
//     @if($size) {
//         background-size: $size;
//     } // .no-svg &{
//     //     background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});
//     //     @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
//     //       background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
//     //     }
//     // }
// }

// 背景颜色渐变
@mixin linear-gradient($from, $to) {
    /* Fallback for sad browsers */
    background-color: $to;
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient($from, $to);
    /* Opera */
    background-image: -o-linear-gradient($from, $to);
    /* WebKit (Safari 4+, Chrome 1+) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
    /* WebKit (Chrome 11+) */
    background-image: -webkit-linear-gradient($from, $to);
    /* IE10 */
    background-image: -ms-linear-gradient($from, $to);
    /* W3C */
    background-image: linear-gradient($from, $to);
}

// 顶部1px边框
//定义一个混合器,用于多次复用.
@mixin borderTop-1px($color) {
    // 用于伪类的定位
    position: relative;
    &:after {
        //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}
// 底部1px边框
//定义一个混合器,用于多次复用.
@mixin borderBottom-1px($color) {
    // 用于伪类的定位
    position: relative;
    &:after {
        //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}
// 定义全局类:.border-1px;期望根据不同dpi去缩放,使用@media实现.
// 最小dpi为1.5的设备进行相关设置:1.5*0.7~1
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5) {
    .border-1px {
        &::after {
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7)
        }
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
    .border-1px {
        &::after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5)
        }
    }
}


// 背景图片
@mixin bg-image($url){
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png");
  }
}


// 扩展点击区域
// extend-click()
//   position: relative
//   &:before
//     content: ''
//     position: absolute
//     top: -10px
//     left: -10px
//     right: -10px
//     bottom: -10px

// 不换行
@mixin no-wrap() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
